<template>
  <div>
    <div class="details-rec-choose">
       <div class="details-rec-dt">选择产品</div>
    <div class="details-rec-dd">
      <div class="details-rec-choose-item">
        <a href="javascript:void(0)" class="details-rec-choose-li">
          <img src="../../../../../assets/img/details/da305be5a4abc1b6.jpg" alt />
          <i>一生之水女士香水25ml</i>
        </a>
      </div>
      <div class="details-rec-choose-item">
        <a href="javascript:void(0)" class="choose-item-comm">
          <img src="../../../../../assets/img/details/da305be5a4abc1b6.jpg" alt />
          <i>一生之水女士香水25ml</i>
        </a>
      </div>
      <div class="details-rec-choose-item">
        <a href="javascript:void(0)" class="choose-item-comm">
          <img src="../../../../../assets/img/details/da305be5a4abc1b6.jpg" alt />
          <i>一生之水女士香水25ml</i>
        </a>
      </div>
    </div>
     </div>
  </div>
</template>
<script>
export default {
    
}
</script>

<style scoped>
.details-rec-choose {
  line-height: 40px;
  margin-bottom: 3px;
  display: block;
}
.details-rec-choose-item {
  background-color: #f7f7f7;
  float: left;
  color: #666;
  margin-right: 7px;
  margin-bottom: 4px;
}
.details-rec-choose-li {
  border: 1px solid #e3393c;
}
.choose-item-comm {
  border: 1px solid #ccc;
}
.choose-item-comm:hover {
  border: 1px solid #e3393c;
}
.details-rec-choose-item a {
  color: #666;
  font-size: 12px;
  display: inline-block;
  height: 43px;
}
.details-rec-choose-item img {
  width: 40px;
  border: 0;
  vertical-align: middle;
}
.details-rec-choose-item i {
  margin: 0 8px;
  font-style: normal
}
.details-rec-dt {
  float: left;
  padding-left: 10px;
  font-family: simsun;
  color: #999;
}
.dt {
  margin-top: 10px;
}
</style>


